<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap和jQuery -->
    <!-- <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>注册用户</title>

    <style>
        body{
            background:url(img/background01.png);
            background-size:cover;
            width: 100%;
            height: 655px;
        }
        #window01{
            background-color: rgba(253, 253, 253, 0.281);
            overflow: hidden;
            width: 50%;
            height: 75%;
            margin-left: 25%;
            margin-top: 40px;
            border: 2px solid rgb(139, 143, 146);
            border-radius: 18px;
            text-align:center
        }
        input[type="text"]{
            width: 50%;
            margin-left: 25%;
        }
        #input-form{
            margin-top: 10px;
        }

    </style>

</head>
<body>
<img id="logo" src="https://cas-paas-443.webvpn.jmu.edu.cn/cas/file/png/logo.png" alt="我是logo">
<div id="window01">
    <div id="register-icon">
        <img src="img/register.png" alt="register" style="width: 100px; margin-top: 50px;">
    </div>
    <form @submit="check();" action="./User/register" method="post" id="input-form">
        <div class="form-group">
            <input v-model="username" name="username" type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="form-group">
            <input v-model="password" name="password"  type="text" class="form-control" placeholder="密码">
        </div>
        <div class="form-group">
            <input  v-model="phone" name="phone" type="text" class="form-control" placeholder="手机号">
        </div>
        <label  for="#"><input type="radio" name="gender" value="男">男</label>
        <label for="#"><input type="radio" name="gender" value="女">女</label><br>
        <button  type="submit" name="registerButton" class="btn btn-light" style="width: 200px;">注 册</button>
    </form>

    <!-- 登录跳转 -->
    <div id="login" style="margin-right:25%;">
        <a href="index.jsp">
            <button type="submit" class="btn btn-default text-info" style="float: right;;"><small>已有账号?点我登录</small></button>
        </a>
    </div>
</div>

</body>
</html>

<script src="js/axios-min.js"></script>
<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#window01",
        data(){
            return{
                username:"",
                password:"",
                phone:"",
                gender:"",
                code:""
            }
        },
        methods:{
            check(){

                var reg = /^\w{2,12}$/;
                if(this.username.length == 0){
                    alert("用户名不为空!");
                    return false;
                }else if(!reg.test(this.username)){
                    alert("用户名应为2-12位，且只能包含数字字母及其下划线")
                }
                var reg = /^\w{3,12}$/;
                if(!reg.test(this.password)){
                    alert("密码不要少于3位!且不包含中文");
                    return false;
                }
                var reg = /^1\d{10}$/
                if(this.phone.length!=11){
                    alert('请输入有效的手机号！');
                    return false;
                }

            }
        }
    })



</script>